<!--  -->
<template>
   <el-dialog :title="title" :visible.sync="dialogFormVisible"  :loading="loading" width="800px">
     <el-form :model="act" :rules="rules">

      <!-- <el-form-item label="活动编号" :label-width="formLabelWidth" prop='actId'>
         <el-input v-model="act.actId" autocomplete="off" :readonly="readonly"></el-input>
       </el-form-item>

       <el-form-item label="学部编号" :label-width="formLabelWidth" prop='actPartId'>
         <el-input v-model="act.actPartId" autocomplete="off" :readonly="readonly"></el-input>
       </el-form-item>

       <el-form-item label="用户编号" :label-width="formLabelWidth" prop='actUserId'>
         <el-input v-model="act.actUserId" autocomplete="off" :readonly="readonly"></el-input>
       </el-form-item> -->

       <el-form-item label="活动名称" :label-width="formLabelWidth" prop='actTitle'>
         <el-input v-model="act.actTitle" autocomplete="off" maxlength="20" show-word-limit :readonly="readonly"></el-input>
       </el-form-item>

       <el-form-item label="标题图片" :label-width="formLabelWidth" prop='actTitleImg'>
         <!-- <el-input v-model="act.actTitleImg" autocomplete="off" :readonly="readonly"></el-input> -->
         <el-upload
           class="avatar-uploader"
           :action= 'url'
           :show-file-list="false"
           :on-success="handleTitleSuccess"
           :file-list="titleFileList"
           :before-upload="beforeAvatarUpload"
           >
           <img v-if="titleImageUrl" :src="titleImageUrl" class="avatar">
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
       </el-form-item>


        <el-form-item label="轮播图" :label-width="formLabelWidth" prop='actContentImg'>
          <!-- <el-input v-model="act.actContentImg" autocomplete="off" :readonly="readonly"></el-input> -->
          <el-upload
            :action= 'url'
            list-type="picture-card"
            :on-success="handleContentSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="contentFileList"
            >

            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="contentVisible">
            <img width="100%" :src="contentImageUrl" alt="">
          </el-dialog>
        </el-form-item>

        <el-form-item label="主办方" :label-width="formLabelWidth" prop='actHost'  >
          <el-input v-model="act.actHost" autocomplete="off" :readonly="readonly" placeholder="例: 北京城市学院信息学部 " width="100px"></el-input>

        </el-form-item>

        <el-form-item label="报名截止日期" :label-width="formLabelWidth" prop='actJoinDeadtime'>
          <el-date-picker
                v-model="act.actJoinDeadtime"
                type="date"
                placeholder="选择日期">
           </el-date-picker>
          <!-- <el-input v-model="act.actJoinDeadtime" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>

        <el-form-item label="活动开始时间" :label-width="formLabelWidth" prop='actStartTime'>
           <el-date-picker
                v-model="act.actStartTime"
                type="datetime"
                value-format='yyyy-MM-dd HH:mm:ss'
                placeholder="选择日期时间">
           </el-date-picker>
          <!-- <el-input v-model="act.actStartTime" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>

        <el-form-item label="活动结束时间" :label-width="formLabelWidth" prop='actStopTime'>
          <el-date-picker
               v-model="act.actStopTime"
               type="datetime"
               value-format='yyyy-MM-dd HH:mm:ss'
               placeholder="选择日期时间">
          </el-date-picker>
          <!-- <el-input v-model="act.actStopTime" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>

        <el-form-item label="活动最大人数" :label-width="formLabelWidth" prop='actMemberMax' >
          <el-input v-model="act.actMemberMax" autocomplete="off" :readonly="readonly" prefix-icon="el-icon-user-solid" placeholder="请输入活动最大人数" type="number"></el-input>
        </el-form-item>

        <el-form-item label="报名审核方式" :label-width="formLabelWidth" prop='actMemberWay'>
           <el-select v-model="act.actMemberWay" placeholder="请选择报名审核方式">
             <el-option
               label="无需审核"
               value="2">
             </el-option>
             <el-option
               label="手动审核"
               value="1">
             </el-option>

            </el-select>
          <!-- <el-input v-model="act.actMemberWay" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>

        <el-form-item label="活动地点" :label-width="formLabelWidth" prop='actAddress'>
          <el-input v-model="act.actAddress" autocomplete="off" :readonly="readonly" placeholder="请详细描述活动地点  例如:北京城市学院顺义校区3号实训楼" @blur="getCoordinate"></el-input>
        </el-form-item>

        <el-form-item label="活动类别" :label-width="formLabelWidth" prop='actType'>
          <el-select v-model="act.actType" placeholder="请选择报名审核方式">
           <el-option
              label="学部级活动"
              value="1">
            </el-option>
          <el-option
            label="校级活动"
            value="2">
          </el-option>
           </el-select>
          <!-- <el-input v-model="act.actType" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>

        <el-form-item label="活动描述" :label-width="formLabelWidth" prop='actDesc'>
          <el-input v-model="act.actDesc" rows="5" autocomplete="off" :readonly="readonly" type="textarea" placeholder="请详细描述活动内容,50字左右" resize="none"></el-input>
        </el-form-item>



        <!-- <el-form-item label="当前状态" :label-width="formLabelWidth" prop='actStatus'>
          <el-input v-model="act.actStatus" autocomplete="off" :readonly="readonly"></el-input>
        </el-form-item> -->

     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="dialogFormVisible = false">关 闭</el-button>
       <el-button type="primary" @click="handleSubmit" v-show="!readonly" :loading="loading">送 审</el-button>
     </div>
   </el-dialog>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {getUserInfoByToken} from '../../api/userInfo.js'
import { getCoordinateByAddress , createActivity} from '../../api/act.js'
  export default {
     name:'',
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        readonly:false,
        url:process.env.VUE_APP_BASE_API+"file/",
        loading: false,
        dialogFormVisible: true,
        formLabelWidth: '100px',
        title: '北京城市学院校园活动申报单',
        contentImageUrl: '',
        titleImageUrl:'',
        contentVisible: false,
        titleFileList:[],
        contentFileList:[],
        userInfo:{},
        act:{
          actId:'',
          actPartId:'',
          actUserId:'',
          actTitleImg:'',
          actTitle:'信息学部校友会',
          actContentImg:'',
          actHost:'北京城市学院信息学部',
          actJoinDeadtime:'',
          actStartTime:'',
          actStopTime:'',
          actMemberMax:'100',
          actMemberWay:'2',
          actDesc:'描述描述',
          actPrincipalName:'',
          actPrincipalPhone:'',
          actPrincipalEmail:'',
          actAddress:'北京城市学院顺义校区3号实训楼',
          actCoordinate:'',
          actType:'1',
          actStatus:''
        },
        rules:{}
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      showInfo(userId) {
        this.title = "活动详情"
        this.readonly = true
        this.fetchData(userId)
      },
      editInfo(userId) {
        this.title = "编辑活动信息"
        this.readonly = false
        this.fetchData(userId)
      },
      fetchData(userId) {
        this.loading = true
        getUserInfoById(userId).then((data) => {
          this.user = data.obj
          this.loading = false
          this.dialogFormVisible = true
        })
      },
      handleRemove(file, fileList) {
         this.contentFileList=fileList
         let list=fileList.map((item)=>{return item.response.obj})
         this.act.actContentImg=list.join("")
         console.log(this.act.actContentImg)
      },
      handlePictureCardPreview(file) {
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
      },
      handleTitleSuccess(res, file) {
        console.log(res)
        if(res.result===true)
        {
          this.$notify({
            title: '成功',
            message: '图片上传成功',
            type: 'success'
          });
           this.act.actTitleImg=res.obj
           this.titleImageUrl = URL.createObjectURL(file.raw);
        }else{
          this.$notify({
            title: '成功',
            message: '图片上传失败',
            type: 'error'
          });
         }

      },
      handleContentSuccess(res,file,fileList){
        console.log(res)
        if(res.result===true)
        {
          this.$notify({
            title: '成功',
            message: '图片上传成功',
            type: 'success'
          });
           this.act.actContentImg+=res.obj
           this.contentFileList=fileList
        }else{
          this.$notify({
            title: '成功',
            message: '图片上传失败',
            type: 'error'
          });

        }


      },
      handleSubmit(){
        console.log(1111)
        // this.act.validate().then(()=>{
          getUserInfoByToken().then((resp)=>{
            this.userInfo=resp.obj
            this.$confirm(`请确认申报人信息是否正确\n申报人姓名：${this.userInfo.userName}\n申报人电话：${this.userInfo.userPhone}\n申报人邮箱：${this.userInfo.userEmail}\n`).then(()=>{
              this.act.actPrincipalName=this.userInfo.userName
              this.act.actPrincipalPhone=this.userInfo.userPhone
              this.act.actPrincipalEmail=this.userInfo.userEmail
              console.log('活动提交')
              console.log(this.act)
              this.loading=true
              createActivity(this.act).then(()=>{
                this.act={}
                this.contentImageUrl= ''
                this.titleImageUrl=''
                this.titleFileList=[]
                this.contentFileList=[]
                this.loading=false
                this.dialogFormVisible=false
                this.$alert('活动送审成功，审核通过后，您将收到邮件通知', '送审成功', {
                          confirmButtonText: '确定'
                          }
                        );
                        
              }).catch((resp)=>{
                this.loading=false
                this.$notify({
                  title: '系统繁忙',
                  message: resp.msg,
                  type: 'error'
                });
              })
            })
          })
        // })
      },
      beforeAvatarUpload(){},
      getCoordinate(){
        if(this.act.actAddress.trim().length>0){
          getCoordinateByAddress(this.act.actAddress).then((resp)=>{
            console.log(resp)
            this.act.actCoordinate=resp.obj
            this.$notify({
                      title: '成功',
                      message: '经纬度信息获取成功',
                      type: 'success'
                    });
          }).catch((resp)=>{
              console.log(resp)
              this.act.actAddress=""
              this.$notify({
                        title: '错误',
                        message: resp.message,
                        type: 'error'
                });
          })
        }
      }

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
